import React from 'react';
import {
  Table as Table_,
  Pagination as Pagination_,
  Popover as Popover_,
  Spin as Spin_,
  PageHeader as PageHeader_,
} from 'antd';
import { TableProps } from 'antd/es/table';
import { PaginationProps } from 'antd/es/pagination';
import { PageHeaderProps } from 'antd/es/page-header';
import { ConfigProvider } from './';
import style from './style.module.less';

/**
 * 表格
 */
export const Table: React.SFC<TableProps<any>> = ({ className, pagination, ...props }) => (
  <Table_
    rowKey="id"
    scroll={{ x: true }}
    className={[style.table, className].join(' ')}
    pagination={{
      showTotal: total => `总计 ${total} 条`,
      ...pagination,
    }}
    {...props}
  />
);

/**
 * 分页
 */
export const Pagination: React.SFC<PaginationProps> = props => (
  <div className={style.pagination}>
    <Pagination_ showTotal={total => `总计 ${total} 条`} {...props} />
  </div>
);

interface IBoxProps {
  loading?: boolean | string;
  className?: string;
}

/**
 * 主体
 */
export const Box: React.SFC<IBoxProps> = ({ loading = false, className, children }) => (
  <ConfigProvider className={[`fill ${style.box}`, className].join(' ')}>
    <Spin_ spinning={!!loading} tip={typeof loading === 'string' ? loading : undefined}>
      {children}
    </Spin_>
  </ConfigProvider>
);

/**
 * 单格
 */
export const BoxItem: React.SFC<React.HTMLProps<HTMLDivElement>> = ({ title, children, ...props }) => (
  <div className={style.boxItem} {...props}>
    {title && <div className={style.title}>{title}</div>}
    {children}
  </div>
);

/**
 * 长文本隐藏
 */
export const tableTextAreaRender = (title: string, text: string, max = 10) => {
  if (typeof text === 'string' && text.length > max) {
    const content = <div style={{ maxWidth: 600, maxHeight: 600, overflow: 'auto' }}>{text}</div>;
    return (
      <Popover_ placement="topRight" title={title} content={content} trigger="hover" overlayStyle={{ maxWidth: 600 }}>
        <span style={{ cursor: 'pointer' }}>{text.substr(0, max)}...</span>
      </Popover_>
    );
  }
  return text;
};

/**
 * 头部模块
 */
export const PageHeader: React.SFC<PageHeaderProps> = ({ className, ...props }) => (
  <PageHeader_ className={[style.pageHeader, className].join(' ')} {...props} />
);
